/**
 * Created by fangshufeng on 2018/4/24.
 */
import React, {Component} from  'react'
import jsonFormat from  'json-format';
import {Input, Button, Modal, message} from 'antd'
import {connect} from 'react-redux'
import {add_one_mock_data,__APP_SELECT_TYPE_MOCK_LIST_} from '../redux/app.redux'
import {_MOCK_ADD_DATA_SUCCEED_,_MOCK_CLOSE_DATA_MSG_,_MOCK_CLOSE_ACTIO_MSG_} from '../redux/socket.msg.type'

const {TextArea} = Input;

class CenterView extends Component {

    componentDidMount() {
        if (this.props.socket === undefined) return;
        const {socket} = this.props;
        if (!socket.hasListeners(_MOCK_ADD_DATA_SUCCEED_)) {
            socket.on(_MOCK_ADD_DATA_SUCCEED_, (result) => {
                this.open_succeed(result ? 'mock成功，在对应设备重新请求即可生效' : 'mock失败');
            });
        }

        if (!socket.hasListeners(_MOCK_CLOSE_DATA_MSG_)) {
            socket.on(_MOCK_CLOSE_DATA_MSG_, (result) => {
                this.open_succeed(result ? '关闭mock成功！' : '关闭mock失败');
            });
        }
    }

    open_succeed = (msg) => {
        const modal = Modal.success({
            title: '提示',
            content: msg,
        });
        setTimeout(() => modal.destroy(), 2000);
    };

    _error = () => {
        message.error('无效的json数据');
    };
    jsonValue = () => {
        try {
            return jsonFormat(this.props.current_select_data.data, {
                type: 'space',
                size: 2
            });
        } catch (e) {
            try {
                return this.props.current_select_data.data;
            } catch (e) {
                return '';
            }
        }

    };

    addMockValue = () => {
        try {
            let value = this.refs.result.textAreaRef.value;
            return JSON.parse(value)
        } catch (e) {
            return undefined;
        }

    };

    _is_can_close_mock = _ => {
        const {select_type} = this.props;
        const {isMock} = this.props.current_select_data;
        if (select_type === undefined) return false;
        if (select_type === __APP_SELECT_TYPE_MOCK_LIST_)  return true;
        if (isMock) return true;

    };
    _is_can_add_mock = _ => {
        const {select_type} = this.props;
        return select_type;

    };

    render() {

        return <div style={{...this.props.style, display: 'flex', flexDirection: 'column'}}>
            <div style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'row',
                justifyContent: 'space-around',
                alignItems: 'center'
            }}>
                <div style={{width: 60, flex: 8}}>请求结果</div>
                <Button style={{...style.btn, marginRight: 5}}
                        disabled={!this._is_can_add_mock()}
                        onClick={() => this.addMockValue() === undefined ? this._error() : this.props.add_one_mock_data({
                            ...this.props.current_select_data,
                            data: this.addMockValue()
                        }) }>应用该条数据</Button>
                <Button style={style.btn}
                        disabled={!this._is_can_close_mock()}
                        onClick={() => this.props.socket.emit(_MOCK_CLOSE_ACTIO_MSG_, {
                            mockKey: this.props.current_select_data.config.urlIdentification
                        }) }>关闭该条mock</Button>
            </div>
            <div style={{
                flex: 20,
                display: 'flex',
            }} key={(new Date()).valueOf()}>
              <TextArea
                  ref="result"
                  type="text"
                  defaultValue={this.jsonValue()}
                  autosize={false}
                  style={{flex: 1}}
              />
            </div>

        </div>
    }
}

const style = {
    btn: {
        color: '#92cdec',
        borderColor: '#92cdec',
        height: 20,
        fontSize: 8,
        flex: 1
    }
};

export default connect(state => state.app, {add_one_mock_data})(CenterView);